<template>
	<view class="layout pageBg">
		<view class="statusbar" :style="{height:statusBarHeight() + 'px'}"></view>
		<view class="loginhead" :style="{height:TitleBarHeight() + 'px'}">
		</view>
		<view class="loginTitle">
			<view class="largerow">
				<text class="largetext">账号密码登录</text>
			</view>
			<view class="smallrow">
				<text class="smalltext">请使用已注册的账号密码</text>
			</view>
		</view>
		<view class="loginBody">
			<view class="phonenumber">
				<view class="phone">
					<uni-icons type="person" size="24"></uni-icons>
				</view>
				<view class="phoneinput">
					<input type="text" v-model="user.phonenumber" placeholder="请输入您的账号" />
				</view>
			</view>
			<view class="password">
				<view class="lock">
					<uni-icons type="locked" size="25"></uni-icons>
				</view>
				<view class="passwordinput">
					<input v-model="user.password" :type="passwordStatus" placeholder="请输入您的密码" />
				</view>
				<view class="eye" @click="changeEye">
					<uni-icons custom-prefix="iconfont" :type="eyeStatus" size="15"></uni-icons>
				</view>
			</view>
			<view class="passwordOperation">
				<view class="remenber">
					<label>
						<checkbox value="cb" checked="true" />记住密码
					</label>
				</view>
				<navigator url="">
					<text>忘记密码?</text>
				</navigator>
			</view>
			<view class="loginButton">
				<button @click="login">登 录</button>
			</view>
			<view class="changelogin">
				<navigator url="../register/register">
					<text>没有账号？去注册</text>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		statusBarHeight,
		TitleBarHeight,
		navBarHeight
	} from '../../utils/system.js';
	import apis from '../../api/apis.js';
	// 登录
	const user = ref({})
	const type = ref(0)
	const login = async () => {

		try {
			// 获取用户token并存储
			const res = await apis.userLoginService(user.value.phonenumber, user.value.password);
			uni.setStorageSync("token", res.data.token);
			uni.setStorageSync("user",user.value.phonenumber)
			// 获取用户信息并存储到本地缓存里
			await apis.userGetInfoService().then((res) => {
				console.log(1111);
				// localStorage.setItem('userInfo', JSON.stringify(res.data))
				uni.setStorageSync("userInfo", res.data);
			});
			type.value = uni.getStorageSync('userInfo')
			if(type.value.userType === 0){
				
			uni.reLaunch({
				url: "/pages/main/main"
			});
			}else if(type.value.userType === 1){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			}
		} catch (error) {
			// 处理登录失败的情况
			uni.showToast({
				title: '登录失败，请检查手机号或密码',
				icon: 'none'
			});
		}



	};

	const eyeStatus = ref('icon-icon-eye-close')
	const bool = ref(false)
	const passwordStatus = ref('password')
	const changeEye = () => {
		bool.value = !bool.value
		console.log(bool.value)
		bool.value === false ? eyeStatus.value = 'icon-kaiyan' : eyeStatus.value = 'icon-icon-eye-close'
		bool.value === false ? passwordStatus.value = 'safe-password' : passwordStatus.value = 'password'
		console.log(eyeStatus.value)
	}
	changeEye()
</script>

<style lang="scss" scoped>
	.layout {
		width: 100vw;
		height: 100vh;

		.loginhead {
			display: flex;
			padding: 12rpx 30rpx 12rpx 30rpx;
			justify-content: space-between;

			.goBack {
				padding: 10rpx;
			}
		}

		.loginTitle {
			margin-top: 120rpx;
		}

		.largetext {
			display: flex;
			justify-content: center;
			font-size: 32px;
			font-weight: 500;
			color: #000;
		}

		.smalltext {
			display: flex;
			margin: 30rpx 0rpx 30rpx 0rpx;
			justify-content: center;
			font-size: 13px;
			font-weight: 400;
			line-height: 18.82px;
			color: rgba(150, 151, 153, 1);
		}
	}

	.loginBody {
		padding: 12rpx 32rpx 12rpx 32rpx;

		.phonenumber {
			padding: 15rpx 32rpx 15rpx 32rpx;
			margin-bottom: 30rpx;
			display: flex;
			// justify-content: space-around;
			align-items: center;
			// border: 1px solid black;
			background-color: white;
			border-radius: 50rpx;

			.phone {
				width: 10%;
			}

			.phoneinput {
				flex: 1;
				padding-left: 30rpx;
				font-size: 13px;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 30px;
				color: rgba(200, 201, 204, 1);
				text-align: left;
				vertical-align: middle;
			}

			// justify-content: space-between;
		}

		.password {
			padding: 15rpx 32rpx 15rpx 32rpx;
			display: flex;
			// border: 1px solid black;
			border-radius: 50rpx;
			align-items: center;
			background-color: white;

			.lock {
				width: 10%;
			}

			.eye {
				width: 5%;
				padding: 10rpx;
			}

			.passwordinput {
				flex: 1;
				padding-left: 30rpx;
				font-size: 23rpx;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 20rpx;
				color: rgba(200, 201, 204, 1);
				text-align: left;
				vertical-align: middle;
			}
		}

		.passwordOperation {
			margin-top: 40rpx;
			margin-bottom: 50rpx;
			display: flex;
			justify-content: space-between;

			label {
				font-size: 23rpx;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 20rpx;
				text-align: left;
				vertical-align: middle;
			}

			navigator {
				font-size: 13px;
				font-weight: 400;
				letter-spacing: 0px;
				color: rgba(22, 93, 255, 1);
				line-height: 20px;
				text-align: left;
				vertical-align: middle;
			}
		}

		.loginButton {
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50rpx;
			margin-bottom: 48rpx;
			height: 80rpx;

			// navigator{
			// 	width: 90vw;
			// 	display: flex;
			// 	align-items: center;
			// 	justify-content: center;
			button {
				color: white;
				line-height: 80rpx;
				background-color: rgba(22, 93, 255, 1);
				width: 90vw;
				border-radius: 50rpx;
				// }
			}
		}

		.changelogin {
			display: flex;
			text-align: center;
			justify-content: center;
			align-items: center;

			navigator {
				text {
					font-size: 30rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 20rpx;
					color: rgba(48, 110, 247, 1);
					text-align: center;
					vertical-align: middle;
				}
			}

		}
	}
</style>